<template>
  <div class="form-adapt-container layout-pd">
    <el-card shadow="hover">
      <el-form :model="state.formData">
        <el-row :gutter="35">
          <el-col :span="8">
            <el-form-item label="模版名称：">
              <el-input placeholder="请输入模板名称搜索" v-model="state.formData.keyWord" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-button type="primary" @click="handleSearch()">
            <SvgIcon name="iconfont icon-biaodan" /> 搜 索
          </el-button>
          <el-button type="primary" @click="handleAdd()">
            <SvgIcon name="iconfont icon-biaodan" /> 新 增
          </el-button>
        </el-row>
      </el-form>
    </el-card>
    <el-card shadow="hover" class="mt15">
      <el-table v-loading="state.loading" :data="state.tableData" row-key="id" ref="goodSpuTableRef"
        style="width: 100%">
        <el-table-column label="ID" width="80" :align="'center'">
          <template #default="scope">
            <span>{{ scope.row.id }}</span>
          </template>
        </el-table-column>

        <el-table-column label="模板名称" :align="'center'">
          <template #default="scope">
            <span>{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="添加时间" :align="'center'">
          <template #default="scope">
            <span>{{ scope.row.createdTime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="更新时间" :align="'center'">
          <template #default="scope">
            <span>{{ scope.row.updateTime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" :align="'center'">
          <template #default="scope">
            <el-button text type="primary" @click="handlerEditDiyPage(scope.row)">
              编辑
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive } from 'vue';
import { useRouter } from 'vue-router';
import { useFormDesignerApi } from '/@/api/formDesigner/index'
const formDesignerApi = useFormDesignerApi() //表单api

const router = useRouter();

const state = reactive({
  formData: {
    keyWord: "",

  },
  loading: false,
  tableData: []
})
const handleSearch = (() => {
  if (state.formData.keyWord == '') {
       getList()
      } else {
        const pattern = new RegExp(state.formData.keyWord, 'i'); // 不区分大小写
        state.tableData =  state.tableData.filter((ele:any) => {
          return pattern.test(ele.name)
        })
      }

})
const handleAdd = (() => {
  router.push({
    path: `/formDesigner`
  }
  );

})
// 添加/编辑
const handlerEditDiyPage = (item:any) => {
  console.log(item.value)
  router.push({
    path: `/formDesigner`,
    query: { id: item.id, formData: JSON.stringify(item.value), name: item.name },
  }
  );
}
const getList = () => {
  state.loading=true
  formDesignerApi.list().then(res => {
    console.log(res)
    state.loading = false
    state.tableData=res.results
  })
  
}
onMounted(() => {
  getList()
})
</script>
